import { getGradientBg } from "@/components/GradientColor/gradientBg"
export default function styleFilter(style){
  return {
    ...style,
    position: 'relative',
    width: "100%",
    height: "100%",
    left: "auto",
    top: "auto",
    backgroundImage: `url(${style.backgroundImage})`,
    backgroundSize: "100% auto",
    backgroundPosition: "center center",
    fontSize: `${style.fontSize }px`,
    // fontWeight: `${style.fontWeight  }`,
    lineHeight: style.lineHeight + style.lineHeightUnit,
    borderWidth: style.borderWidth + style.borderWidthUnit,
    borderRadius: `${style.borderRadius}px`,
    // ...style,
    // width: style.width + style.widthUnit,
    // height: style.height + style.heightUnit,
    // fontSize: `${style.fontSize  }px`,
    // fontWeight: `${style.fontWeight  }`,
    // lineHeight: style.lineHeight + style.lineHeightUnit,
    // borderWidth: style.borderWidth + style.borderWidthUnit,
  }
}


export function getBackgroundImageAndColor(style) {
  const bg = getGradientBg(style.backgroundColor)
  let obj = {}
  if (style.backgroundImage) {
    obj = {
      ...obj,
      backgroundImage: `url(${style.backgroundImage})`,
      backgroundSize: "100% auto",
      backgroundPosition: "center center",
    }
  }
  else if (bg.startsWith('linear')) {
    obj.backgroundImage = bg
  }
  else if (bg.startsWith('#')) {
    obj.backgroundColor = bg
  }
  else {
    obj.backgroundColor = bg
  }
  return {
    ...obj,
    opacity: typeof style.backgroundColor.opacity === 'number' ? style.backgroundColor.opacity : 1
  }
}
